Thread

I’m looking for something like what http://abc.go.com/ does on their menu. I’d like to have a nav link pop up a div in which I could have text and links in instead of just a simple unordered list that you normally see. ABC may not be the best example, but it’s all I can find right now, so hopefully it gets the point across.

I’ve checked into the Superfish plugin but I’m not sure it will do what I need without some sort of customization which I’m not capable of doing at the current time.

If you’re talking about revealing a div full of links based on a click, then it isn’t too tricky at all. Take a look a the jQuery functions show, hide, and toggle, and the click event.

http://docs.jquery.com/Events/click

http://docs.jquery.com/Effects/show

Thanks! Yeah, doesn’t seem to difficult but we’ll see. 😉

I’ve been reading “Learning jQuery” and “jQuery in Action” but haven’t made it past the introductions. Hopefully this will be an easy fix.

I have recently been using a lot of jQuery. In saying that, I mean I have been taking examples and adapting them for my own use! I find it really clean and pretty easy to understand though, compared to some other Javascript libraries.

thats pretty easy to implement. just toggle the visibility of those hidden divs when you click the menu items jquery101 😊

Deron,

Check out the sitemap link at the top right hand of the main ExpressionEngine site.

Should give you a good idea of how it’s done if you look in the source 😉

Best wishes,

Mark

yup, here ya go: #sm_toggle is the id of the a tag. when clicked it calls a function that slideToggles the div with id sm_outer at a speed of 400. couldnt be easier 😉

$('a#sm_toggle').click(function() {
            $('#sm_outer').slideToggle(400);
            return false;
          });

Thanks Mark! Didn’t even realize they used it on the sitemap link.

Stef25: Thanks a lot! I’ll give that a try!

Hi Deron,
You also might find this article a good read before committing to type of dropdown.

Hi Deron,
You also might find this article a good read before committing to type of dropdown.

Those types of drop downs aren’t necessarily what I’m looking for.

Here’s what I started working on to give you an idea: http://www.randomjabber.com/test/logogala/jquery_test.html (click the subscribe link)

oh, you just need a div to “fly-out” <- btw nice
:red:  you can tell what I been doing lately

Thanks Mark! Didn’t even realize they used it on the sitemap link.

Stef25: Thanks a lot! I’ll give that a try!

No problem, hope it works out for you. There’s also a nice tutorial over at Nettuts that covers this kind of thing too.

Best wishes,

Mark

If you haven’t solved this yet, I took up the challenge 😉 .

The fly-in part was surprisingly difficult to get right, without scroll bars popping up all over the place.  Anyways, I’ve hacked together a fly-in plugin.  You can probably work out the fly-out one from there.

Demo (everything you need is in the source).

[Edit: It could also be changed to hook onto an element instead of the viewport border.]

Thanks Mark! Didn’t even realize they used it on the sitemap link.

Stef25: Thanks a lot! I’ll give that a try!

No problem, hope it works out for you. There’s also a nice tutorial over at Nettuts that covers this kind of thing too.

Best wishes,

Mark

Well how about that! Pretty nice tutorial although doesn’t work with JS disabled. I think I’ll have a go with something like what EE is doing with their sitemap link. It still works with JS disabled and that would be idea.

If you haven’t solved this yet, I took up the challenge 😉 .

The fly-in part was surprisingly difficult to get right, without scroll bars popping up all over the place.  Anyways, I’ve hacked together a fly-in plugin.  You can probably work out the fly-out one from there.

Demo (everything you need is in the source).

[Edit: It could also be changed to hook onto an element instead of the viewport border.]

Thanks for taking the time to put that together. I’ll try to break it down figure out what’s happening behind the scenes.

Hi Deron,

Most of these Javascript things can be made to work without Javascript though. I think that what you do is just place the link to the page that contains the same information as that which you show in the div inside the link then what should happen is that when the person has Javascript enabled it will over-ride the link in the a tag and perform the javascript drop-down but if they have javascript disabled then it should re-direct.

Best wishes,

Mark